<template>
	<div class="recommend-list bg-white">
		<div class="recommend-list">
			<ul class="w92 auto list-ul layout flex-w" v-if="flag" style="padding-bottom:60px;"> 
			 	<li class="w48 mt15" v-for="(item,index) in data" :key="index" @click="jumpDetail(item)">  
					<img class="responsive-img img-bg" :src="item.img" alt="">
					<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
					<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
					<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
					<div class="layout"> 
						<p><span class="fs12 subject">￥</span><strong class="fs18 subject bold">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
						<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import { Progress } from 'vant';
	export default{
		name:'Recommend',
		components: {
			Progress,
		},
		data()
		{
			return{
				page_index : 1,
				recommand  : [],
				data       : [],
				loading    : true,
				flag       : true,
				img        : require('../assets/img1.png')
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/category/userlike').then(res => {
					this.data = res.data
				})
			},
			jumpDetail(item)
			{
				this.$router.replace('/detail?id=' + item.crow_id)
			}
		}
	}
</script>

<style lang="less">
	.recommend-list{
		img{
			height: 10rem;
		}
	}
</style>
